<template>
  <div id="contsainer"></div>
</template>
<script>
import ellipse from './images/ellipse.jpg'

export default {
  data() {
    return {
      viewer: null
    }
  },
  mounted() {
    this.initCesium()
    this.addEllipse(this.viewer)
  },
  methods: {
    initCesium() {
      this.viewer = new Cesium.Viewer('contsainer', {
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        scene3DOnly: true,
        timeline: false,
        selectionIndicator: false, //是否显示选取指示器组件
        shouldAnimate: false, //自动播放动画控件
        shadows: true, //是否显示光照投射的阴影
        terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY, //地质接收阴影
        sceneMode: Cesium.SceneMode.SCENE3D
      })
      this.viewer._cesiumWidget._creditContainer.style.display = 'none' //	去除版权信息
    },
    addEllipse(viewer) {
      let entity = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(-111.0, 40.0),
        name: 'ellipse',
        ellipse: {
          semiMinorAxis: 300000.0, //短半轴
          semiMajorAxis: 300000.0, //长半轴,注意长半轴和短半轴相等才是圆
          height: 200000.0,
          material: Cesium.Color.GREEN,
          rotation: Cesium.Math.PI_OVER_FOUR
        }
      })

      viewer.trackedEntity = entity
      //自定义跟踪
      // let entityView = new Cesium.EntityView(entity, viewer.scene, viewer.scene._globe._ellipsoid);
      // let boundingSphere = new Cesium.BoundingSphere(Cesium.Cartesian3.fromDegrees(-111.0, 40.0,200000.0), 3000000);
      // viewer.scene.postRender.addEventListener((time) => {
      //     //在场景更新前，实体视口跟踪实时更新到包裹球
      //     entityView.update(time, boundingSphere)
      // })
    }
  }
}
</script>
<style scoped>
#contsainer {
  height: 100%;
  width: 100%;
  background-color: red;
}
</style>
